<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin: 0;padding:0;
        }
    ul,ol{
    list-style: none;
    }
    img{
    display: block;
    }
    #sports-header{
    width: 100%;height: 50px;background: #00B7FF;display: flex;
    justify-content: space-between;align-items: center;color: aliceblue;font-size: 20px;
    padding: 0 10px;position: fixed;top:0;z-index:100;
    }
    #sports-main{
        margin-top:50px;height: calc(100vh - 50px);
    }
    #sports-main ul{
        background: white;
    }
    #sports-main ul li{
        display: flex;border-bottom: 1px #f7f7f7 solid;margin: 0 18px;padding:20px 0;
    }
    #sports-main .sports-list-text{
        flex: 1;font-size: 18px;line-height: 26px;
    }
    #sports-main .sports-list-text p:last-of-type{
        font-size: 14px;columns: #828c9b;display: flex;margin-top: 10px;
    } 
    #sports-main .sports-list-text p:last-of-type span{margin-right: 10px;}
    #sports-main .sports-list-img img{width: 100%;border-radius: 10px;}
    #sports-main .sports-list-img{width: 130px;margin-left:20px;}
    #loadingDown{
        width: 100%;position: absolute;top:60px;z-index: -1;text-align: center;
    }
    #loadingUp{width: 100%;text-align: center;padding:20px 0 ;}
    #loading{
        position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin:auto;
        width: 200px;height: 30px;line-height: 30px;text-align: center;z-index: 100;
    }
    </style>
    <script src="javascripts/axios.min.js"></script>
</head>
<body>
    <header  id="sports-header">
        腾讯 | 体育
    </header>
    <div class="" id="loadingDown"></div>
    <main class="" id="sports-main">
        <div>
            <ul class="sports-list">
            </ul>
            <div class="" id="loadingUp"></div>
        </div>
        <div class="" id="loading"></div>
    </main>
    <script src="javascripts/template-web.js"></script>
    <script id="tpl-sportsList" type="text/html">
        {{each list}}
        <li>            
            <div class="sports-list-text">
                <p>
                    {{ $value.title }}
                </p>
                <p>
                    <span>{{ $value.comment }}评</span>
                </p>
            </div>
            <div class="sports-list-img">
                <img src="{{$value.imgs}}">
            </div>
        </li>
        {{/each}}
    </script>
    <script>
        var sportsList =document.querySelector('.sports-list'); 
        var xhr = new XMLHttpRequest();
        xhr.onload = function(){
            if(xhr.status==200){
                // console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                if(data.errcode == 0){
                    console.log(data)
                    sportsList.innerHTML = template('tpl-sportsList',data);
                }
            }
        };
        xhr.open('POST','/list',true);
        xhr.setRequestHeader('Content-Type','application/json');
        xhr.send(JSON.stringify({"page":0,"count":5}));
    </script>
</body>
</html>